<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuex加减的例子,getter 版本</title>
</head>
<body>
    <div id="app">
        <button @click="showStore">点击显示仓库中的内容</button>
        <h1>{{this.$store.state.count}}</h1>
        <h1>总价{{this.$store.getters.totalPrice}}</h1>
       <button @click="add">点击加1 </button>
    </div>
</body>
<script src="../vue-demos/node_modules/vue/dist/vue.js"></script>
<!-- 1 引入vuex的依赖 -->
<script src="../node_modules/vuex/dist/vuex.js"></script>
<script>
    // 2 创建仓库
     let store = new Vuex.Store({
         // getters 相当于vue中的computed 计算属性
        getters:{
            totalPrice:(state)=>{
                console.log(this);
                return state.count *10
            }
         },
         // 仓库中的数据
         state:{
             count:888
         },
        
         // 改变值的操作
         mutations:{
             increment:function(state){
                 state.count +=1 ;
             }
         }
     })
     let vm = new Vue({
         el:"#app",
        //  3.配置仓库
         store ,
          methods:{
              showStore:function(){
                console.log(this.$store)
              } ,
              add:function(){
                 // this.$store.state.count+=1 直接修改 不推荐
                 // 提交commit  修改数据
                 this.$store.commit("increment") ;
                //  this.$store.dispatch("asyncIncrement")
              }
          }
     })
    //  console.log(Vuex)
</script>
</html>